import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
} from 'vue';

import _ from 'lodash';

import { dom, useQuasar } from '@teld/q-components';
import {
  commonProps,
  pickOwnForBasicComponent,
  usePropsTwoWayValues,
} from 't/common/utils';
import ColumnSettingList from './ColumnSettingList';
import "./ColumnSetting.scss";
import TButton from 't/basic/button';
import TSeparator from 't/basic/separator';
import QTabs, { QTab } from "@teld/q-components/Tabs"

export default defineComponent({
  directives: {
    removeTabindex: {
      mounted(el) {
        // 移除 tabindex 属性
        el?.removeAttribute('tabindex');
      },
    },
  },
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
    visibleColumns: {
      type: Array,
      default() {
        return [];
      },
    },
    columnSortBy: {
      type: Array,
      default() {
        return [];
      },
    },
    lockTab: {
      type: String,
      default: '',
    },
  },
  emits: ['cancel', 'confirm'],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();

    const curTab = ref(props.lockTab || 'col');

    const columns = computed(() => {
      return _.transform(
        props.columns,
        (result, col) => {
          if (col?.field) {
            result.push({ label: col.label, value: col.name });
          }
        },
        [],
      );
    });

    const fixedColumns = computed(() => {
      return _.transform(
        props.columns,
        (result, col) => {
          if (col?.field) {
            if (['left', 'right'].includes(col?.optCol?.fixedColumn)) {
              result.push({ name: col.name });
            }
          }
        },
        [],
      );
    });

    const columnsExcludedFixed = computed(() => {
      return _.transform(
        props.columns,
        (result, col) => {
          if (col?.field) {
            if (['left', 'right'].includes(col?.optCol?.fixedColumn)) {
              return;
            }
            result.push({ label: col.label, value: col.name });
          }
        },
        [],
      );
    });

    const visibleColumnsExcludedFixed = ref(
      _.transform(
        columnsExcludedFixed.value,
        (result, col) => {
          if (props.visibleColumns.includes(col.value)) {
            result.push({ name: col.value });
          }
        },
        [],
      ),
    );

    const visibleColumns = ref(
      _.transform(
        columns.value,
        (result, col) => {
          if (props.visibleColumns.includes(col.value)) {
            result.push({ name: col.value });
          }
        },
        [],
      ),
    );

    const visibleColumnsKeys = computed(() => {
      return _.map(visibleColumns.value, 'name');
    });

    const columnSortBy = ref(
      _.transform(
        props.columnSortBy,
        (result, col) => {
          result.push({ name: col.field, sortOrder: col.sort });
        },
        [],
      ),
    );

    return () => {
      return (
        <>
          <div
            class='column t-data-grid_columnSetting'
            style='height: 100%; width: 328px;'
          >
            <div class='col-auto'>
              <header style='margin:16px 24px; font-size: 16px; line-height:16px; color: rgba(0,0,0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));'>
                <span
                  role='heading'
                  title={$q.lang.dataGrid?.cmdColumn?.drawerTitle}
                >
                  {$q.lang.dataGrid?.cmdColumn?.drawerTitle}
                </span>
              </header>
              <TSeparator></TSeparator>
            </div>
            <div class='col-auto'>
              <div style='margin-top:16px;margin-left:24px;margin-right:24px;color:rgba(0,0,0, var(--t-color-opacity, /*批量处理90%透明度*/0.9))'>
                {$q.lang.dataGrid?.cmdColumn?.helper}
              </div>
            </div>
            <div class='col column'>
              <div class='col-auto'>
                <QTabs
                  dense
                  breakpoint={false}
                  v-model={curTab.value}
                  align='left'
                  active-color='primary'
                >
                  {('' === props.lockTab || 'col' === props.lockTab) && (
                    <QTab
                      tabindex='0'
                      ripple={false}
                      label={$q.lang.dataGrid?.cmdColumn?.columns}
                      name='col'
                      class='mv-tab'
                    ></QTab>
                  )}
                  {('' === props.lockTab || 'sort' === props.lockTab) && (
                    <QTab
                      ripple={false}
                      tabindex='0'
                      label={$q.lang.dataGrid?.cmdColumn?.sort}
                      class='mv-tab'
                      name='sort'
                    ></QTab>
                  )}
                </QTabs>
                <TSeparator></TSeparator>
              </div>
              <div class='col' style='overflow-y: scroll; height: 100%'>
                <div style='margin-left: 24px;margin-right: 16px;'>
                  <QTab-panels v-model={curTab.value}>
                    <QTab-panel name='col' class='q-pa-none'>
                      {'col' == curTab.value && (
                        <ColumnSettingList
                          v-model:items={visibleColumnsExcludedFixed.value}
                          columns={columnsExcludedFixed.value}
                        ></ColumnSettingList>
                      )}
                    </QTab-panel>
                    <QTab-panel name='sort' class='q-pa-none'>
                      {'sort' == curTab.value && (
                        <ColumnSettingList
                          v-model:items={columnSortBy.value}
                          visibleColumns={visibleColumnsKeys.value}
                          isSort={true}
                          columns={columns.value}
                        ></ColumnSettingList>
                      )}
                    </QTab-panel>
                  </QTab-panels>
                </div>
              </div>
            </div>
            <div class='col-auto'>
              <div
                class='text-right'
                style='margin: 16px 24px;column-gap: 8px;display: flex;justify-content: flex-end;'
              >
                <TButton
                  v-removeTabindex
                  label={$q.lang.dataGrid?.cmdColumn?.cancel}
                  class='tr-button-default'
                  onClick={() => emit('cancel')}
                />
                <TButton
                  v-removeTabindex
                  label={$q.lang.dataGrid?.cmdColumn?.confirm}
                  class='tr-button-primary'
                  onClick={() => {
                    let eArgs = {
                      visibleColumns: [
                        ...fixedColumns.value,
                        ..._.filter(visibleColumnsExcludedFixed.value, 'name'),
                      ],
                      sortColumns: _.filter(columnSortBy.value, 'name').map(
                        item => {
                          return { field: item.name, sort: item.sortOrder };
                        },
                      ),
                    };
                    emit('confirm', eArgs);
                  }}
                />
              </div>
            </div>
          </div>
        </>
      );
    };
  },
});
